.b_hero-image-and-text
{
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 60px 20px;
	align-items: flex-start;
	gap: 60px;
	position: relative;

	h1, .h1
	{
		font-family: Blinker;
		font-size: 48px;
		font-weight: 400;
		font-style: normal;
		color: #FFF;
		line-height: 48px /* 100% */;
	}

	h2, .h2
	{
		font-family: Blinker;
		font-size: 22px;
		font-weight: 400;
		font-style: normal;
		color: #DFDFDF;
		line-height: 26px /* 118% */;
	}

	p, .p
	{
		font-family: "Instrument Sans";
		font-size: 18px;
		font-weight: 500;
		font-style: normal;
		color: #DFDFDF;
		line-height: 28px /* 156% */;
		letter-spacing: 0.02em;
	}

	.image-2
	{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		position: relative;
		flex: 0 0 auto;
		width: 100%;
		overflow: clip;
		background-color: #363636;
		order: 0;
	}

	.image-example-2
	{
		position: relative;
		flex: 0 0 350px;
		width: 100%;
		object-fit: cover;
		aspect-ratio: 1 / 1;
		order: 0;
	}

	.text-2
	{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
		position: relative;
		flex: 0 0 auto;
		width: 100%;
		order: 1;
	}

	.headlines-2
	{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		position: relative;
		flex: 0 0 auto;
		width: 100%;
		order: 0;
	}

	h1.title-2
	{
		align-self: stretch;
		order: 0;
	}

	h2.sub-title-2
	{
		align-self: stretch;
		order: 1;
	}

	.body-copy-2
	{
		display: contents;
	}

	.body-copy-2 p
	{
		align-self: stretch;
		order: 1;
	}

	@media (min-width: 1440px)
	{
		width: 100%;
		padding: 60px;
		align-items: center;
		gap: 120px;
		flex-direction: initial;

		.image-2
		{
			flex: 0 0 500px;
			flex-shrink: 0;
			width: initial;
		}

		.image-example-2
		{
			flex: 0 0 500px;
		}

		.text-2
		{
			height: 308px;
			flex: 1 1 0%;
			min-width: 0;
			width: initial;
		}

		.title-2
		{
			font-size: 60px;
			line-height: 64px /* 107% */;
		}

		.sub-title-2
		{
			font-size: 26px;
			line-height: 30px /* 115% */;
		}
	}
}